<template>
  <div class="timer-shaft">
    <c-title :text="false"></c-title>
    <div>
      <div class="title">{{ axis.name }}</div>
      <div class="content" v-if="axis.content">{{axis.content}}</div>
      <div
        style="display: flex; justify-content: flex-end; align-items: center; margin-right: 0.9375rem; margin-bottom: 1rem; margin-top: 1rem;"
      >
        <span style="margin-right: 0.3125rem;">{{ show_type == 0 ? '倒序' : '正序' }}</span>
        <van-switch
          v-model="show_type"
          size="0.75rem"
          :active-value="1"
          :inactive-value="0"
          @change="change(show_type)"
        />
      </div>
      <div
        v-for="(item,index) in list"
        :key="item.id"
        style="display: flex; margin-bottom: 0.625rem; justify-content: space-between;"
      >
        <div class="box-left">
          <div
            style="font-size: 1.125rem; font-weight: bold;"
            v-if="index == 0 || (item.time.split(' ')[0].split('-')[0] !== list[index - 1].time.split(' ')[0].split('-')[0]) "
          >{{ item.time.split(' ')[0].split('-')[0] }}</div>
          <div
            style="color: #666; font-size: 0.75rem;"
            :class="index == 0 || (item.time.split(' ')[0].split('-')[0] !== list[index - 1].time.split(' ')[0].split('-')[0])?'mt-2':''"
          >
            <template
              v-if="index==0 || item.time!==list[index-1].time"
            >{{ item.time.split(' ')[0].split('-')[1] + '月' }}{{ item.time.split(' ')[0].split('-')[2] + '日' }}</template>
          </div>
          <div
            v-if="list[index + 1] && item.time.split(' ')[0].split('-')[0] == list[index + 1].time.split(' ')[0].split('-')[0] && item.time == list[index+1].time"
            class="time-line h100"
          ></div>
          <div
            v-if="list[index + 1] && item.time.split(' ')[0].split('-')[0] == list[index + 1].time.split(' ')[0].split('-')[0] && item.time !== list[index+1].time"
            class="time-line"
            :class="index == 0 || (item.time.split(' ')[0].split('-')[0] !== list[index - 1].time.split(' ')[0].split('-')[0])  ?'h40':item.time==list[index-1].time?'h100':'h80'"
          ></div>
        </div>
        <div class="box-right" @click="link(item.h5_link)">
          <div class="click-title" :style="{'color':item.color}">{{ item.name }}</div>
          <div style="display: flex; justify-content: space-between;">
            <div
              v-if="item.content"
              style="color: #999; margin-right: 0.625rem; text-align: left; font-size: 0.75rem;"
            >{{ item.content }}</div>
            <img
              v-if="item.thumb_url"
              style="width: 3.125rem; height: 3.0625rem; margin: 0;"
              :src="item.thumb_url"
            />
          </div>
          <div class="click-label-group">
            <template v-for="(chi, i) in item.label_color">
              <span class="label-item" v-if="chi.label" :style="{ 'background-color': chi.color }">
                {{ chi.label
                }}
              </span>
            </template>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { scrollMixin } from "../../utils/mixin";
export default {
  mixins: [scrollMixin],
  data() {
    return {
      list: [],
      current_page: 1,
      last_page: 1,
      isLoadMore: true,
      show_type: 0,
      aid: "",
      axis: {}
    };
  },
  activated() {
    this.aid = this.$route.query.id;
    this.isLoadMore = true;
    this.getData();
  },
  methods: {
    async getMoreData() {
      if (this.current_page >= this.last_page) {
        return;
      }
      if (this.isLoadMore) {
        this.isLoadMore = false;
        let page = this.current_page + 1;
        let { data, result, msg } = await $http.get("plugin.time-axis.frontend.controllers.axis.eventList", { aid: this.aid, page, show_type: this.show_type }, "loading");
        this.isLoadMore = true;
        if (result == 1) {
          let { list } = data;
          list.data.forEach(item => {
            if (item.label_arr && item.label_arr.length !== 0) {
              item.label_color = this.createGroups(item.label_arr, 4);
              item.label_color = this.feat_color(item.label_color);
            }
          });
          this.list = this.list.concat(list.data);
          this.current_page = list.current_page;
          this.last_page = list.last_page;
        } else {
          this.$toast(msg);
        }
      }
    },
    change(show_type) {
      $http.get("plugin.time-axis.frontend.controllers.axis.eventList", { aid: this.aid, show_type }).then(res => {
        if (res.result == 1) {
          let { list } = res.data;
          list.data.forEach(item => {
            if (item.label_arr && item.label_arr.length !== 0) {
              item.label_color = this.createGroups(item.label_arr, 4);
              item.label_color = this.feat_color(item.label_color);
            }
          });
          this.list = list.data;
          this.current_page = list.current_page;
          this.last_page = list.last_page;
        } else {
          this.$toast(res.msg);
        }
      });
    },
    link(h5_link) {
      if (h5_link) {
        window.open(h5_link, "_blank");
        // window.location.href = h5_link;
      }
    },
    createGroups(array, subGroupLength) {
      let index = 0;
      let newArray = [];
      while (index < array.length) {
        newArray.push(array.slice(index, (index += subGroupLength)));
      }
      return newArray;
    },
    feat_color(arr) {
      let _newArr = [];
      let _color = ["#13C7A7", "#FCA814", "#FC6614", "#1481FC"];
      arr.forEach((item, i) => {
        _newArr[i] = [];
        item.forEach((c, c_i) => {
          _newArr[i].push({ color: _color[c_i], label: c });
        });
      });
      let _result = [];
      _newArr.forEach(item => {
        item.forEach(c => {
          _result.push(c);
        });
      });
      return _result;
    },
    async getData() {
      let { data, result, msg } = await $http.get("plugin.time-axis.frontend.controllers.axis.eventList", { aid: this.aid });
      if (result == 1) {
        let { list, axis } = data;
        this.axis = axis;
        this.show_type = axis.show_type;
        list.data.forEach(item => {
          if (item.label_arr && item.label_arr.length !== 0) {
            item.label_color = this.createGroups(item.label_arr, 4);
            item.label_color = this.feat_color(item.label_color);
          }
        });
        this.list = list.data;
        this.current_page = list.current_page;
        this.last_page = list.last_page;
        let _title = axis.name;
        let _imgUrl = axis.img||'';
        let _description = axis.content?axis.content: axis.name;
        this.fun.wxShare(
              "",
              {},
              {
                title: _title ,
                imgUrl: _imgUrl ,
                description: _description,
              }
            );
      } else {
        this.$toast(msg);
      }
    }
  }
};
</script>

<style scoped lang="scss">
.timer-shaft {
  padding-bottom: 2.75rem;

  .content {
    text-align: center;
    font-size: 0.6875rem;
    margin: 0 0.9375rem;
    color: #999;
  }

  .mt-2 {
    margin-top: 1rem;
  }

  .box-left {
    margin: 0 0.9375rem;
    flex: 1;
    overflow: hidden;
  }

  .title {
    margin-top: 1rem;
    margin-bottom: 0.875rem;
    font-weight: 500;
    font-size: 1.1rem;
    color: #333;
  }

  .h100 {
    height: 98%;
  }

  .h80 {
    height: 100%;
  }

  .h40 {
    // height: calc(100% - 5rem);
    height: 100%;
  }

  .time-line {
    position: relative;
    left: 50%;
    top: 5%;
    width: 1px;
    background-color: #ccc;
  }

  .click-title {
    text-align: left;
    margin-bottom: 0.8125rem;
    font-size: 1.1rem;
  }

  .click-label-group {
    margin-top: 0.8125rem;
    font-size: 0.625rem;
    display: flex;
    flex-wrap: wrap;
  }

  .label-item {
    padding: 0.2rem;
    border-radius: 0.0625rem;
    color: #fff;
    margin-right: 0.3125rem;
    margin-bottom: 0.3125rem;
  }

  .box-right {
    width: 17.125rem;
    background: #fff;
    padding: 0.875rem;
    margin-right: 0.9375rem;
  }
}
</style>
